// import { Button } from "../_client/Button";
// export const dynamic = "force-dynamic";

const getTodoList = async () => {
  const res = await fetch(
    'https://dummyjson.com/todos',
    // { cache: 'force-cache' }   // getStaticProps (pages router)
    // { cache: 'no-store' }      // getServerSideProps (pages router)
  )
  if (!res.ok) throw new Error('fetch products failed!')
  return await res.json()
}

type TodoItemType = {
  id?: number;
  completed?: boolean;
  todo: string;
  userId?: number;
};
export const Todo = async ({children}:{
  children?: React.ReactNode;
}) => {
  const {todos} = await getTodoList() || {}
  console.log(todos)
  console.log((new Date()).toLocaleString())

  return (
    
    <div className="border-2 border-black p-2">
      <h1 className="text-4xl mb-1">Todo</h1>
      <p>{(new Date()).toLocaleString()}</p>
      {/* <Button>inside</Button> */}
      {children}
      <ul>

      { todos?.map?.((x:TodoItemType) => (
        (!!x?.id && x.id < 7) &&
        <li key={x.id}>
          <p className={ x.completed ? "line-through text-gray-300":""}>
            #{x.id}
            &nbsp;
            {x.todo}
          </p>
        </li>
      ))}
      </ul>
    </div>
  )
}
